<template>
  <div class="footer">
    <div class="footer-box">
      <div class="footerLogo">
        <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="" style="width:100%;height:56px">
      </div>
      <div class="footer-nav">
        <ul>
          <li><a href="#">小米商城</a></li>
          <li><a href="#">MIUI</a></li>
          <li><a href="#">米家</a></li>
          <li><a href="#">米聊</a></li>
          <li><a href="#">多看</a></li>
          <li><a href="#">游戏</a></li>
          <li><a href="#">智能</a></li>
          <li><a href="#">电器</a></li>
        </ul>
      </div>
      <div class="text">
        © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号
        （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告
        增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Footer'
}
</script>

<style scoped lang=scss>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  background-color: #333;
  .footer-box {
    .footerLogo {
      width: 56px;
      height: 56px;
      margin: 0 auto;
    }
    .footer-nav {
      margin-top: 20px;
      ul {
        overflow: hidden;
      }
      ul li {
        float: left;
        padding: 0 10px;
        border-right: 1px solid #ccc;
        &:last-child {
          border: 0;
        }
        a {
          color: #fff;
        }
      }
    }
    .text {
      width: 500px;
      height: 72px;
      color: #ccc;
      margin-top: 15px;
      padding-left: 10px;
    }
  }
}
</style>
